.header{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
}
.banner{
	height: 807px;
	background: url(../img/3a82160ca6740b0f0a38b30a6fe4495.jpg)  no-repeat -46px 0px;
}
.header .wp{
	max-width: 1400px;
	margin: 0 auto;
}
.header .wp .logo{
	float: left;
	max-height: 184px;
	margin-top: 29px;
}
.header .wp .snv{
	display: none;
	float: right;
	margin-top: 7px;
	background-color: #FFFFFF;
}
.header .wp .snv .more p{
	width: 33px;
	height:4px;
	margin-bottom: 5px;
	background-color: #CCCCCC;
}
.header .wp .snv ul{
	display: none;
	background: #FFFFFF;
	width: 250px;
	height: 1000px;
	box-shadow: 1px 0px 0px #000000,1px 1px 7px #000000;
}
.header .wp .snv li a{
	display: block;
	text-align: center;
	color: #333;
	font-size: 16px;
	font-weight:bold;
	line-height: 30px;
}
.header .wp .logo img{
	max-height: 100%;
}
.header .wp  .hdr{
	float: right;
	margin-top: 61px;
}
.header .wp .hd-link{
	margin-top: 470px;
}
.header .wp  .hdr .so  .input{
	position: relative;
	margin-left: 465px;
	margin-bottom: 40px;
	float: right;
}
.header .wp  .hdr .so  .input .text{
		width: 460px;
		height: 38px;
		border-radius: 19px;
		border: solid 1px #dcdcdc;
		outline: none;
		padding-left: 40px;
}
.header .wp  .hdr .so .input .ip{
	float: left;
	margin-right: 18px;
}
.header .wp  .hdr .so .input .ip img{
		position: absolute;
		left: -7px;
		top: -28px;
}
.header .wp  .hdr .so .input>img {
		float: right;
}
.header .wp  .hdr .nav li:nth-of-type(1) ::after{
		display: none;
}
.header .wp  .hdr .nav li{
	float: left;
	padding-right: 20px;	
}
.header .wp  .hdr .nav li:nth-of-type(9){
	
	padding-right: 0px;	
}
.header .wp  .hdr .nav li a{
	display: block;
	padding-left:20px;
	position: relative;
	color: #000000;
	font-size: 18px;
}
.header .wp  .hdr .nav li a::after{
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	background-color: #a62424;
	border-radius: 50%;
	position: absolute;
	left: 0px;
	top:10px;
}
.header .wp .banner{
	height: 300px;
	background: url(../img/君子以自强不息.png) no-repeat center;
}
.row-a1{
	
	background-color: #5697b6;
}
.row-a1 .wp{
	max-width: 1400px;
	margin: 0 auto;
}
.row-a1 .wp .list-case li{
	float: left;
	width: 25%;
	padding: 24px 0px 41px;
}
.row-a1 .wp .list-case li .con{
	width: 100%;
}
.row-a1 .wp .list-case li .con .pic{
	height: 113px;
	position: relative;
}
.row-a1 .wp .list-case li .con .pic img{
	display: block;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.row-a1 .wp .list-case li .con .txt{
	text-align: center;
	color: #FFFFFF;
}
.row-a1 .wp .list-case li .con .txt .title{
		font-size: 20px;
		font-weight: normal;
		color: #fefefe;
		margin-top: 15px;
		margin-bottom: 12px;
}
.row-a1 .wp .list-case li .con .txt .titlesub{
			font-size: 14px;
			font-weight: normal;

			color: #fefefe;

}


.row-a2{
	height: 585px;
}
.row-a2 .wp{
	position: relative;
	max-width: 1437px;
	height: 100%;
	margin: 0 auto;
	position: relative;
	background: url(../img/牛哄哄一家人是红遍网络的正能量知识型动漫生态体%20致力于以动漫为内容表现形式.png) no-repeat 0px 0px;
}
.row-a2 .wp .btns{
	position: absolute;
	bottom: 100px;
	right: 20px;
}
.row-a2 .wp .btns:hover button{
	cursor: pointer;
	color: aquamarine;
}
.row-a2 .wp .btns button{
		width: 244px;
		height: 60px;
		background-color: #5697b6;
		outline: none;
		border: none;
		font-size: 18px;
		font-weight: normal;
		color: #ffffff;	
}
.row-a3{
	width: 100%;
	height: 693px;
	margin-top: -7px;
	background:url(../img/subject.png) no-repeat -50px 0px;
}
.row-a3 .wp{
	position: relative;
	max-width: 1400px;
	height: 100%;
	margin: 0 auto;	
}
.row-a3 .wp .btns{
	position: absolute;
	bottom: 154px;
	left: 0px;
}
.row-a3 .wp .btns:hover button{
	cursor: pointer;
	color: aquamarine;
}
.row-a3 .wp .btns button{
		width: 244px;
		height: 60px;
		background-color: #ec6941;
		outline: none;
		border: none;
		font-size: 18px;
		font-weight: normal;
		color: #ffffff;	
}
.row-a4{
	background-color: #eaebf0;
	padding: 53px 0px 66px;
}
.row-a4 .wp{
	max-width: 1400px;
	margin: 0 auto;
}
.row-a4 .wp .col-l{
	float: left;
	overflow: hidden;
	width: 602px;
	margin-right: 20px;
}
.row-a4 .wp .col-l img{
	display: block;
	width: 100%;
	transition: all 0.8s linear;
}
.row-a4 .wp .col-l:hover img{
	transform: scale(1.1);
}
.row-a4 .wp .col-c{
	float: left;
	overflow: hidden;
	width: 422px;
	margin-right: 20px;
}

.row-a4 .wp .col-c img{
	display: block;
	width: 100%;
	transition: all 0.8s linear;
}
.row-a4 .wp .col-c:hover img{
	transform: scale(1.1);
}
.row-a4 .wp .col-r{
	float: left;
	overflow: hidden;
}
.row-a4 .wp .col-r{
	float: left;
}
.row-a4 .wp .col-r-t{
	width: 335px;
	height: 352px;
	overflow:hidden;
	margin-bottom: 15px;
}
.row-a4 .wp .col-r .col-r-t img{
	display: block;
	min-width: 100%;
	transition: all 0.8s linear;
}
.row-a4 .wp .col-r .col-r-t:hover img{
	transform: scale(1.1);
}
.row-a4 .wp .col-r .col-r-b{
		width: 335px;
		height: 182px;
		background-color: #ec6941;
}
.row-a4 .wp .col-r .col-r-b .more{
			display: block;
			font-size: 24px;
			font-weight: normal;
			line-height: 182px;
			color: #ffffff;
			text-align: center;
}
.row-a5{
	height: 623px;
	background:url(../img/comments.png) no-repeat ;
}
/* 底部 */
.footer{
	background-color: #5697b6;
}
.footer .wp{
	max-width: 1400px;
	margin: 0 auto;
	padding: 84px 0px 64px;
}
.footer .wp .fd-left{
	float: left;
	width: 37.5%;
}
.footer .wp .fd-right{
	width: 55%;
	float: right;
}
.footer .wp .fd-left .title{
		font-size: 42px;
		font-weight: bold;
		line-height: 42px;
		color: #ffffff;
		margin-bottom: 36px;
}
.footer .wp .fd-left .pic{
	padding-bottom: 30px;
	border-bottom: 1px solid #cccccc;
}
.footer .wp .fd-left .pic .qr{
		float: left;
		width: 124px;
}
.footer .wp .fd-left .pic .qr img{
		display: block;
		max-width: 100%;
		margin-bottom: 18px;
}
.footer .wp .fd-left .pic .qr p{
		text-align: center;
		font-size: 14px;
		font-weight: normal;
		color: #ffffff;
}
.footer .wp .fd-left .pic .qr:nth-of-type(1){
		margin-right: 36px;
}
.footer .wp .fd-left .con p:nth-of-type(1){
	margin-top: 21px;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: normal;
	color: #ffffff;
}
.footer .wp .fd-left .con p:nth-of-type(2){
		font-size: 14px;
		font-weight: normal;
		color: #ffffff;
		opacity: 0.6;
}
.footer .wp .fd-left .con p:nth-of-type(3){
	margin-top: 21px;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: normal;
	color: #ffffff;
}
.footer .wp .fd-left .con p:nth-of-type(4){
		font-size: 14px;
		font-weight: normal;
		color: #ffffff;
		opacity: 0.6;
}

.footer .wp .fd-right .con .title{
		font-size: 42px;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 8px;
		position: relative;
}
.footer .wp .fd-right .con .title::after{
	content: "";
	display: block;
	width: 63px;
	height: 85px;
	position: absolute;
	top: -24px;
	left: 215px;
	background: url(../img/牛努比手舞足蹈.png) no-repeat;
}

.footer .wp .fd-right .con .titlesub{
		font-size: 14px;
		font-weight: normal;
		color: #ffffff;
		margin-bottom: 28px;
}
.footer .wp .fd-right .ul-input{
	margin: 0px -20px;
}
.footer .wp .fd-right .ul-input li{
	width: 33.33%;
	float: left;
	margin-bottom: 28px;
	padding: 0px 20px;

}
.footer .wp .fd-right .ul-input li:nth-of-type(3){
	margin-right: 0px;
}
.footer .wp .fd-right .ul-input li:nth-of-type(6){
	margin-right: 0px;
}
.footer .wp .fd-right .ul-input li:nth-of-type(7){
	width: 100%;
}
.footer .wp .fd-right .ul-input li p{
		font-size: 14px;
		font-weight: normal;
		color: #ffffff;	
}
.footer .wp .fd-right .ul-input li input{
		
		width: 100%;
		border: none;
		border-bottom: 1px solid #CCCCCC;
		outline:none;
		background-color: #5697b6 ;
		font-weight: normal;
		line-height: 38px;	
		
}
.footer .wp .fd-right .ul-input li .select{
		width: 100%;
		border: none;
		border-bottom: 1px solid #CCCCCC;
		outline:none;
		background-color: #5697b6 ;
		font-weight: normal;
		height: 39px;
		font-size: 16px;
}
.footer .wp .fd-right .ul-input li input::-webkit-input-placeholder{
		color: #FFFFFF;
		font-size: 16px;
		opacity: 0.2;
		position: relative;
}
.footer .wp .fd-right .ul-input li .icon::after{
	content: "";
	width: 12px;
	height: 7px;
	display: block;
	background:red;
	position: absolute;
	left: 0px;
	top: 0px;
}
.footer .wp .fd-right  form .btns{
	width: 116px;
	height: 37px;
	background-color: #ffffff;
	border-radius: 19px;
	outline: none;
	border: none;
	font-size: 14px;
	font-weight: normal;
	color: #5697b6;
	transition: all  0.8s linear;
}
.footer .wp .fd-right  form .btns:hover{
	background: pink;
	color: palegreen;
}
.copy{
		width: 100%;
		height: 60px;
		background-color: #002245;
}
.copy .wp{
	max-width: 1400px;
	margin: 0 auto;
}
.copy p{
			font-size: 12px;
			font-weight: normal;
			padding-top: 15px;
			line-height: 30px;
			color: #ffffff;
			opacity: 0.3;
}
@media  screen and (max-width: 768px) {
	.header{
		position: fixed;
		left: 0px;
		top: 0px;
		z-index: 9999;
		background-color: #FFFFFF;
		padding: 7px 15px;
		border-bottom: 1px solid #CCCCCC;
		margin-bottom: 15px;
	}
	.header .wp .logo{
		max-width: 36px;
		max-height: 36px;
		margin-top: 0px;
	}
	.header .logo img{
		max-height: 100%;
		max-width: 100%;
	}
	
	.header .wp .snv{
		position: relative;
		display: block;
	}
	.header .wp .snv ul{
		position: absolute;
		right: -15px;
		top: 22px;
		bottom: 0px;
		padding: 50px;
	}
	.header .wp .snv li a{
		display: block;
		text-align: center;
		color: #333;
		font-size: 16px;
		font-weight:bold;
		line-height: 30px;
	}
	.row-a1{
		background-color: #FFFFFF;
		padding: 0px 15px;
	}
	.row-a1 .wp .list-case li{
		float: none;
		width: 100%;
		margin-bottom: 8px;
		background: #5697b6;
	}
	.header .wp  .hdr{
		display: none;
	}
	.banner{
		margin-top: 51px;
		width: 100%;
		height: 300px;
		background-size: cover;
		background-position-x: 0px;
	}
	.row-a2{
		height: 306px;
	}
	.row-a2 .wp{
		width: 90%;
		background-size: contain;
	}
	.row-a2 .wp .btns{
		bottom: 20px;
		right: 20px;
	}
	.row-a2 .wp .btns button{
		width: 120px;
		 height: 30px;
		 line-height: 30px;
		  font-size: 14px;
		  bottom: 10px;
	}
	.row-a3{
		    background-size: cover;
			height:265px;
			background-position-x: 0px;
			
	}.row-a3 .wp{
		  width: 70%;
	}
	.row-a3 .wp .btns{
		bottom: 25px;
		left:0px;
	}
	.row-a3 .wp .btns button{
		    width: 120px;
		    height: 30px;
		    line-height: 30px;
		    font-size: 14px;
	}
	.row-a4{
		padding-top: 0px;
		padding-bottom: 15px;
	}
	.row-a4 .wp .col-l{
		width: 100%;
		margin-bottom: 15px;
	}
	.row-a4 .wp .col-c{
		width: 100%;
	}.row-a4 .wp .col-c img{
		max-height: 100%;
		max-width: 100%;
	}
	.row-a4 .wp .col-r{
		width: 100%;
	}
	.row-a4 .wp .col-r .col-r-t{
		min-width: 100%;
		padding-bottom: 0px;
	}.row-a4 .wp .col-r .col-r-t img{
		min-width: 188%;
	}
	.row-a5{
		display: none;
	}
	.row-a4 .wp .col-r .col-r-b{
		width: 100%;
		padding: 15px;
	}
	.footer{
		overflow: hidden;
		padding: 15px;
	}
	.footer .wp{
		padding: 0px;
	}
	.footer .wp .fd-left{
		float: none;
		width: 100%;
	}
	.footer .wp .fd-right{
		float: none;
		width: 100%;
		
	}
	.footer .wp .fd-right .ul-input li{
		width: 50%;
	}
	.copy p{
		padding-top: 0px;
		font-size: 14px;
	}
}
@media  screen and (max-width: 414px){
	.banner{
		margin-top: 51px;
		width: 100%;
		height:180px;
		background-size: cover;
		background-position-x: 0px;
	}
	.row-a2{
		height: 160px;
	}
	.row-a3{
		    background-size: cover;
			height: 200px;
			background-position-x: -50px;
			
	}.row-a3 .wp{
		  width: 86%;
	}
	.row-a3 .wp .btns{
		bottom: 25px;
		left:0px;
	}
	.row-a3 .wp .btns button{
		    width: 120px;
		    height: 30px;
		    line-height: 30px;
		    font-size: 14px;
	}
}